<template>
  <div>
    <!-- 顶部导航栏 -->
    <el-header class="custom-header">
      <div class="custom-menu">
        <!-- 左侧菜单项 -->
        <div class="left-menu">
          <el-menu
            :default-active="$route.path"
            mode="horizontal"
            router
            background-color="#fdf6e3"
            text-color="#5d4037"
            active-text-color="#ff7043"
          >
            <el-menu-item index="/user/photos">图片列表</el-menu-item>
            <el-menu-item index="/user/posts">帖子列表</el-menu-item>
            <el-menu-item index="/user/events">活动列表</el-menu-item>
          </el-menu>
        </div>

        <!-- 右侧个人中心菜单项 -->
        <div class="right-menu">
          <el-menu
            :default-active="$route.path"
            mode="horizontal"
            router
            background-color="#fdf6e3"
            text-color="#5d4037"
            active-text-color="#ff7043"
          >
            <el-menu-item index="/user/profile" class="profile-menu">
              <el-icon style="margin-right: 5px">
                <User />
              </el-icon>
              个人中心
            </el-menu-item>
          </el-menu>
        </div>
      </div>
    </el-header>

    <!-- 页面内容 -->
    <el-main class="custom-main">
      <router-view />
    </el-main>
  </div>
</template>

<script>
export default {
  name: "LayoutMenu",
};
</script>

<style>
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: auto;
}

/* 顶部导航栏样式 */
.custom-menu {
  position: fixed;
  z-index: 2000;
  left: 0px;
  display: flex;
  align-items: center;
  width: 100%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background: linear-gradient(to bottom, #fefcf5, #fdf6e3);
  border-bottom: 1px solid #ebe5d9;
}

/* 左侧菜单样式 */
.left-menu {
  flex-grow: 1;
}

/* 右侧菜单样式 */
.right-menu {
  margin-left: auto;
}

/* 个人中心菜单项样式 */
.profile-menu {
  font-weight: bold;
  color: #ff7043 !important;
  background: linear-gradient(to right, #ffe0b2, #ffccbc);
  border-radius: 12px;
  padding: 8px 16px;
  transition: all 0.3s ease-in-out;
}

/* 左侧菜单和右侧菜单容器固定宽高 */
.left-menu {
  min-width: 50px;
  overflow: hidden;
  margin-left: 50px;
}
.right-menu {
  min-width: 200px;
  overflow: hidden;
  margin-right: 0px;
}

/* 为 el-menu 设置固定宽度，避免频繁的尺寸调整 */
.custom-menu el-menu {
  width: 100%;
}

/* 媒体查询：响应式设计 */
@media (max-width: 768px) {
  .custom-menu {
    left: 0px;
    width: 100%;
  }
  .left-menu {
    margin-right: 50px;
  }
  .right-menu {
  min-width: 200px;
}
}
</style>

